<template>
    <h3>错误详情查看</h3>
    <p>目前检索内容为分布式数据库中的全部数据，因存在通信延迟、大数据量查询和数据整合延迟，所以此处查询速递稍慢，希望可以理解</p>
    <el-tabs class="demo-tabs" v-model="activeName">
        <el-tab-pane label="主日志查询错误" name="first">
            <el-table :data="tableData" v-if="open_error > 0" @cell-dblclick="$func.elTableCopyText">
                <el-table-column prop="file_name" label="所在日志文件" width="200" />
                <el-table-column prop="error" label="错误内容"/>
            </el-table>
            <el-empty description="查询数据为空" v-if="open_error <= 0"/>
        </el-tab-pane>
        <el-tab-pane label="PIPE管道日志" name="second">
            <el-table :data="pipe_log" @cell-dblclick="$func.elTableCopyText">
                <el-table-column prop="file_name" label="所在日志文件" width="200" >
                    <template #default="scope">
                        <span v-if="$route.query.id == scope.row.id" style="color:red">{{ scope.row.file_name }}</span>
                        <span v-else-if="$func.timesmarp(scope.row.id,3) == $func.timesmarp($route.query.id,3)"  style="color:#409eff">{{ scope.row.file_name }}</span>
                        <span v-else>{{ scope.row.file_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="args" label="所属应用"/>
                <el-table-column prop="content" label="日志内容"/>
                <el-table-column label="添加时间" width="170">
                    <template #default="scope">
                        {{ $func.timesmarp(scope.row.id,3) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="APP专属日志" name="third">
            <el-table :data="app_log" @cell-dblclick="$func.elTableCopyText">
                <el-table-column prop="file_name" label="所在日志文件" width="200" >
                    <template #default="scope">
                        <span v-if="$route.query.id == scope.row.id" style="color:red">{{ scope.row.file_name }}</span>
                        <span v-else-if="$func.timesmarp(scope.row.id,3) == $func.timesmarp($route.query.id,3)"  style="color:#409eff">{{ scope.row.file_name }}</span>
                        <span v-else>{{ scope.row.file_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="args" label="所属应用"/>
                <el-table-column prop="file" label="发生文件" show-overflow-tooltip/>
                <el-table-column prop="line" label="行" width="100"/>
                <el-table-column prop="level" label="等级" width="100"/>
                <el-table-column prop="content" label="日志内容" show-overflow-tooltip/>
                <el-table-column label="添加时间" width="170">
                    <template #default="scope">
                        {{ $func.timesmarp(scope.row.id,3) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="程序运行日志" name="runtimes">
            <el-table :data="runtime_log" @cell-dblclick="$func.elTableCopyText">
                <el-table-column prop="file_name" label="所在日志文件" width="200" >
                    <template #default="scope">
                        <span v-if="$route.query.id == scope.row.id" style="color:red">{{ scope.row.file_name }}</span>
                        <span v-else-if="$func.timesmarp(scope.row.id,3) == $func.timesmarp($route.query.id,3)"  style="color:#409eff">{{ scope.row.file_name }}</span>
                        <span v-else>{{ scope.row.file_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="args" label="所属应用"/>
                <el-table-column prop="func" label="调用函数" show-overflow-tooltip/>
                <el-table-column prop="line" label="行"/>
                <el-table-column prop="runtime" label="运行耗时(纳秒)">
                    <template #default="scope">
                        {{ $func.number_format(scope.row.runtime) }}
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" width="170">
                    <template #default="scope">
                        {{ $func.timesmarp(scope.row.id,3) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="Quest请求日志" name="fourth">
            <el-table :data="quest_log" @cell-dblclick="$func.elTableCopyText">
                <el-table-column prop="file_name" label="所在日志文件" width="100" show-overflow-tooltip>
                    <template #default="scope">
                        <span v-if="$route.query.id == scope.row.id" style="color:red">{{ scope.row.file_name }}</span>
                        <span v-else-if="$func.timesmarp(scope.row.id,3) == $func.timesmarp($route.query.id,3)"  style="color:#409eff">{{ scope.row.file_name }}</span>
                        <span v-else>{{ scope.row.file_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="args" label="所属应用"/>
                <el-table-column prop="uri" label="请求的网址" show-overflow-tooltip/>
                <el-table-column prop="param" label="请求参数" show-overflow-tooltip/>
                <!-- <el-table-column prop="http_code" label="Code"/> -->
                <el-table-column prop="body" label="返回值" show-overflow-tooltip/>
                <el-table-column prop="error" label="错误信息" show-overflow-tooltip/>
                <el-table-column prop="header" label="请求Header" show-overflow-tooltip/>
                <el-table-column prop="quest_sec" label="请求耗时(纳秒)">
                    <template #default="scope">
                        {{ $func.number_format(scope.row.quest_sec) }}
                    </template>
                </el-table-column>
                <el-table-column prop="client_ip" label="客户端IP"  show-overflow-tooltip/>
                <el-table-column prop="uid" label="UID"/>
                <!-- <el-table-column prop="uuid" label="UUID"/> -->
                <el-table-column prop="ruid" label="RUID" show-overflow-tooltip/>
                <el-table-column label="添加时间" width="170">
                    <template #default="scope">
                        {{ $func.timesmarp(scope.row.id,3) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ElLoading } from 'element-plus'
export default {
    data(){
        return {
            activeName:"first",
            tableData:[],
            open_error:0,
            pipe_log:[],
            app_log:[],
            quest_log:[],
            runtime_log: [],
        }
    },
    mounted(){
        this.SearchInfo()
    },
    methods:{
        // 数据搜索
        SearchInfo(res){
            console.log("搜索内容：",res)
            var that = this
            const loading = ElLoading.service({
                lock: true,
                text: '搜索中......',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            that.$axios.get("api:search.log.info",{params:{
                id: that.$route.query.id,
                did: that.$route.query.did,
            }}).then(res=>{
                that.tableData = res.data
                for(var i in that.tableData){
                    if(that.tableData[i].type == "open_error"){
                        that.open_error ++
                    } else if(that.tableData[i].type == "pipe"){
                        for(var j in that.tableData[i].pipe_log){
                            that.tableData[i].pipe_log[j].file_name = that.tableData[i].file_name
                            that.pipe_log.push(that.tableData[i].pipe_log[j])
                        }
                    } else if(that.tableData[i].type == "app"){
                        for(var j in that.tableData[i].app_log){
                            that.tableData[i].app_log[j].file_name = that.tableData[i].file_name
                            that.app_log.push(that.tableData[i].app_log[j])
                        }
                    } else if(that.tableData[i].type == "quest"){
                        for(var j in that.tableData[i].quest_log){
                            that.tableData[i].quest_log[j].file_name = that.tableData[i].file_name
                            that.quest_log.push(that.tableData[i].quest_log[j])
                        }
                    } else if(that.tableData[i].type == "runtime"){
                        for(var j in that.tableData[i].runtime_log){
                            that.tableData[i].runtime_log[j].file_name = that.tableData[i].file_name
                            that.runtime_log.push(that.tableData[i].runtime_log[j])
                        }
                    }
                }
                loading.close()
            })
        },
    },
}
</script>